<template>
  <view class="index">
    <!-- 知识点：easycom引入组件 -->
    <uni-notice-bar show-icon text="欢迎使用虚拟卡充值" />
    <view class="pay-card">
      <view v-if="card.storage" @click="bindCardEditTap()">
        <!-- 知识点：uni的flex布局，注意时间不能加在uni-row、uni-col上 -->
        <uni-row :gutter="20">
          <uni-col :span="6">
            <!-- 知识点：require图片 -->
            <image class="company-icon" :src="require(`../../assets/${companies[card.type].image}`)" />
          </uni-col>
          <uni-col :span="18">
            <view class="company-title"> {{ companies[card.type].title }}虚拟卡 </view>
            <view class="card-sn"> {{ card.sn }} </view>
          </uni-col>
        </uni-row>
      </view>
      <view v-else>
        <uni-row :gutter="20">
          <uni-col
            v-for="(company, companyKey) in companies"
            :key="companyKey"
            :span="12"
          >
            <view class="company-item" @click="bindCardTap(companyKey)">
              <view class="company-title">
                <view>
                  <image class="company-icon" :src="require(`../../assets/${companies[companyKey].image}`)" />
                  {{ company.title }}
                </view>
                <view class="company-action">
                  <uni-icons type="plusempty" size="32" color="" />
                </view>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
    </view>
    <view class="product-box">
      <uni-row :gutter="20">
        <!-- 知识点：响应式，可以用IPAD，竖屏匹配sm，横屏匹配md -->
        <uni-col v-for="(productItem, index) in products" :key="index" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <view class="product-item" @click="bindProductTap(index)">
            <view class="product-title"> {{ productItem.title }} </view>
            <view class="product-price"> 售价￥{{ productItem.price.toFixed(2) }}元 </view>
          </view>
        </uni-col>
      </uni-row>
    </view>
    <view class="ad-box">
      <uni-row :gutter="20">
        <uni-col :span="8">
          <view class="ad-info">
            <image class="ad-img" :src="require('../../assets/quick.png')" />
          </view>
          <view class="ad-info">快速到账</view>
        </uni-col>
        <uni-col :span="8">
          <view class="ad-info">
            <image class="ad-img" :src="require('../../assets/discount.png')" />
          </view>
          <view class="ad-info">立享优惠</view>
        </uni-col>
        <uni-col :span="8">
          <view class="ad-info">
            <image class="ad-img" :src="require('../../assets/ensure.png')" />
          </view>
          <view class="ad-info">权威保障</view>
        </uni-col>
      </uni-row>
    </view>
    <view class="note-box">
      <view class="note-h3">注意事项</view>
      <view class="note-info"> 继续使用本服务即表示您同意《虚拟卡充值服务协议》 </view>
      <view class="note-info"> 1、充值支付成功后，正常将于30分钟内到账，超过24小时未到账，请及时与我们联系； </view>
    </view>
    <view>
      <!-- 充值弹窗 -->
      <uni-popup ref="popupCard" background-color="#fff">
        <view class="popup-content">
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">虚拟卡类型</text>
            </uni-col>
            <uni-col :span="16">
              <uni-row :gutter="20" style="justify-content: flex-start">
                <uni-col :span="12">
                  <text class="">{{ companies[card.type].title }}</text>
                </uni-col>
                <uni-col :span="12">
                  <image class="company-icon" :src="require(`../../assets/${companies[card.type].image}`)" />
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">虚拟卡号</text>
            </uni-col>
            <uni-col :span="16">
              <input v-model="card.sn" class="uni-input" placeholder="请填写虚拟卡号">
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">持卡人</text>
            </uni-col>
            <uni-col :span="16">
              <input v-model="card.user" class="uni-input" placeholder="请填写持卡人">
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">手机号码</text>
            </uni-col>
            <uni-col :span="16">
              <input v-model="card.mobile" class="uni-input" placeholder="请填写手机号码">
            </uni-col>
          </uni-row>
          <uni-row :gutter="20" class="row-action">
            <uni-col :span="24">
              <button type="primary" :loading="loading" @click="handleSaveCard()"><uni-icons :type="cardPanelIcon" color="#fff" />{{ cardPanelTitle }}</button>
            </uni-col>
          </uni-row>
          <uni-row v-if="card.storage" :gutter="20" class="row-action">
            <uni-col :span="24">
              <button type="" :loading="loading" @click="handleClearCard()"><uni-icons type="trash" />删除虚拟卡信息</button>
            </uni-col>
          </uni-row>
        </view>
      </uni-popup>
      <!-- 充值弹窗 -->
      <uni-popup ref="popupPay" background-color="#fff">
        <view class="popup-content">
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">虚拟卡类型</text>
            </uni-col>
            <uni-col :span="16">
              <uni-row :gutter="20" style="justify-content: flex-start">
                <uni-col :span="12">
                  <text class="">{{ companies[card.type].title }}</text>
                </uni-col>
                <uni-col :span="12">
                  <image class="company-icon" :src="require(`../../assets/${companies[card.type].image}`)" />
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">虚拟卡卡号</text>
            </uni-col>
            <uni-col :span="16">
              <text class="">{{ card.sn }}</text>
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">持卡人</text>
            </uni-col>
            <uni-col :span="16">
              <text class="">{{ card.user }}</text>
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">充值金额</text>
            </uni-col>
            <uni-col :span="16">
              <text class="">{{ product.title }}</text>
            </uni-col>
          </uni-row>
          <uni-row :gutter="20">
            <uni-col :span="8">
              <text class="">支付金额</text>
            </uni-col>
            <uni-col :span="16">
              <text class="">￥{{ product.price.toFixed(2) }}元</text>
            </uni-col>
          </uni-row>
          <uni-row :gutter="20" class="row-action">
            <uni-col :span="24">
              <button type="primary" :loading="loading" @click="handlePay()">立即支付</button>
            </uni-col>
          </uni-row>
        </view>
      </uni-popup>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      products: [
        {
          key: 'pay-100',
          title: '100',
          price: 100
        },
        {
          key: 'pay-200',
          title: '200',
          price: 200
        },
        {
          key: 'pay-500',
          title: '500',
          price: 500
        },
        {
          key: 'pay-1000',
          title: '1000',
          price: 1000
        }
      ],
      companies: {
        weixin: {
          title: '微信',
          image: 'weixin.png'
        },
        alipay: {
          title: '支付宝',
          image: 'alipay.png'
        }
      },
      card: {
        type: 'alipay', // 设置默认alipay，避免下面根据card.type获取值时报错
        sn: '',
        user: '',
        mobile: '',
        storage: false
      },
      product: {
        key: '',
        title: '',
        price: 0
      },
      cardPanelTitle: '',
      cardPanelIcon: '',
      loading: false
    }
  },
  onShow: function() {
    // 知识点：页面生命周期
    try {
      const card = uni.getStorageSync('card')
      if (card) {
        this.card = card
      }
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    bindCardTap(companyKey) {
      this.cardPanelTitle = '添加虚拟卡信息'
      this.cardPanelIcon = 'plus'
      this.card.type = companyKey
      this.$refs.popupCard.open('bottom')
    },
    bindCardEditTap() {
      if (this.card) {
        this.cardPanelTitle = '编辑虚拟卡信息'
        this.cardPanelIcon = 'compose'
        this.$refs.popupCard.open('bottom')
      }
    },
    handleSaveCard() {
      const that = this
      this.card.storage = true
      this.loading = true
      // 知识点：异步存储
      uni.setStorage({
        key: 'card',
        data: this.card,
        success: function() {
          uni.showToast({
            title: '提交成功',
            duration: 2000
          })
          that.$refs.popupCard.close()
        },
        fail: function() {
          uni.showToast({
            title: '提交失败',
            icon: 'error',
            duration: 2000
          })
        },
        complete: function() {
          that.loading = false
        }
      })
    },
    handleClearCard() {
      // 设置默认alipay，避免下面根据card.type获取值时报错
      this.card = {
        type: 'alipay',
        sn: '',
        user: '',
        mobile: '',
        storage: false
      }
      // 知识点：同步存储
      try {
        this.loading = true
        uni.removeStorageSync('card')
        this.$refs.popupCard.close()
        this.loading = false
      } catch (err) {
        console.log(err)
        this.loading = false
      }
    },
    bindProductTap(idx) {
      this.product = this.products[idx]
      this.$refs.popupPay.open('bottom')
    },
    handlePay() {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: String(Date.now()),
        nonceStr: 'A1B2C3D4E5',
        package: 'prepay_id=wx20180101abcdefg',
        signType: 'MD5',
        paySign: '',
        success: function(res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function(err) {
          console.log('fail:' + JSON.stringify(err))
        }
      })
    }
  }
}
</script>
<style lang="scss">
.pay-card {
  border: 1upx #d6e4ef solid;
  border-radius: 12upx;
  margin: 24upx;
  background-color: #fff;
  padding: 24upx;
}

.company-title {
  font-size: 36upx;
  font-weight: bold;
  line-height: 36upx;
}

.product-box {
  margin: 24upx;
}

.product-box .at-row {
  flex-wrap: wrap;
}

.product-item {
  border: 1upx #d6e4ef solid;
  border-radius: 12upx;
  margin: 24upx;
  padding: 24upx;
}

.product-title {
  text-align: center;
  font-weight: bold;
}

.product-price {
  text-align: center;
  font-size: 16upx;
  color: #6190e8;
}

.note-box {
  margin: 24upx;
}

.note-box .note-h3 {
  font-size: 32upx;
  font-weight: bold;
}

.note-box .note-info {
  font-size: 18upx;
}

.ad-box .ad-info {
  text-align: center;
  font-size: 18upx;
}

.ad-box .ad-img {
  width: 120upx;
  height: 120upx;
}

.company-icon {
  width: 36upx;
  height: 36upx;
  margin: 0 5upx;
}

.company-item {
  border: 1upx #d6e4ef solid;
  border-radius: 12upx;
  margin: 24upx;
  padding: 24upx;
}

.company-title {
  text-align: center;
  font-weight: bold;
}

.company-action {
  margin: 20upx 0 0 0;
  text-align: center;
  font-size: 30upx;
  color: #6190e8;
}

.row-action {
  margin: 20upx 0;
}

.popup-content {
  padding: 20upx;
}

.popup-content .uni-row {
  margin: 5upx 0;
}
</style>
